<!--
 * @Author: your name
 * @Date: 2020-05-18 09:15:40
 * @LastEditTime: 2020-06-05 11:33:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tuyibo\components\HomeRecommend.vue
--> 
<template>
<section class="album">
  <div class="album-inner">
    <el-card class="box-card">
      <div slot="header" style="text-align:left;">
        <span class="card-title">我的图集</span>
      </div>
      <el-row :gutter="15" style="margin-top:15px;">
        <el-col :span="6" v-for="(item,index) in homeList" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <el-image :src="item.thumbnail|getStaticImg" style="height:240px;cursor:pointer;" fit="cover" @click="linkTo(item)"></el-image>
            <div class="card-content" @click="linkTo(item)">
              <p class="title">{{item.name}}</p>
              <!-- <p class="text-info hidden-md-and-down">{{item.imgCount}}张</p> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</section>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data() {
    return {
      homeList:[]
    }
  },
  mounted() {
    this.$axios.get("/api/base/homeRecommendation", { order: "ASC", orderBy: "sort" }).then(res => {
      this.homeList = res.data;
    });
  },
  methods:{
     linkTo(obj) {
      var type = parseInt(obj.tp_type);
      if (type === 4) {
        window.open(obj.link, "_self");
        return; 
      } else{
        this.$router.push({
          name: "topic",
          path: "/topic",
          query: {
            topic_id: obj.id,
            title: obj.name
          }
        });
      } 
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.album {
    position: relative;
    padding-top: 24px;
    height: 800px;
    .album-inner {
      padding: 0 16px;
      position: relative;
    }
    ::v-deep.el-card {
        position: relative;
        margin-bottom: 15px;
        .el-image {
            display: block;
            width: 100%;
        }
        .card-content {
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: rgba(0,0,0,.75);
            color: @white;
            font-size: 20px;
            font-weight: 600;
            border-radius: 6px;
            padding: 12px 16px;
            transition: all 0.2s;
            transform-origin: center center;
            .title {
                border-bottom: 4px solid @white;
                padding-bottom: 6px;
                word-break: break-all;
            }
            .text-info {
                font-size: 14px;
                font-weight: lighter;
                padding-top: 5px;
            }
        }
        &:hover {
            .card-content {
                opacity: 0;
                transform: translate(-50%,-50%) scale(2);
            }
        }
    }
}
</style>
